<template>
  <BasicModal :show="props.open" title="培训邮件预览" width="70%" :loading="load" :widthComfirm="true" @comfirm="handleOk"
    @closeModal="$emit('close')">
    <template #content>
      <div class="agreement">
        <div class="content">
          <div v-for="(item) in contentList" v-html="item == 'null' ? '' : item"
            :class="['items', item == 'null' ? 'mt-30' : '']" :key="item">
          </div>
        </div>
      </div>
    </template>
  </BasicModal>

</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import BasicModal from "@/views/ApplicationDetails/Modals/BasicModal.vue"
import { batchTrainingEmail } from '@/api/train/detail.ts'
import { message } from 'ant-design-vue'
import { useRoute } from "vue-router"
import { comStores } from '@/store/common/comStore';
import { Button } from "@/components/Button";
import { getImageUrl } from "@/assets/common/common.ts";
import getEmailDetail from "@/assets/tool/email.ts"
const store = comStores()

const props = defineProps({
  selectList: {
    type: Array,
    default: () => {
      return []
    },
  },
  params: {
    type: Object,
    default: () => {
      return {}
    },
  },
  options: {
    type: Array,
    default: () => {
      return []
    },
  },
  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
  open: {
    type: Boolean,
    default: false
  }
})


interface personObejct {
  name: string
  userName: string
}

// 当前人员
const person = computed((): personObejct => {
  return props.selectList.length > 0 ? props.selectList[0] : null as any
})

// 表单数据
const data = computed(() => {
  return { ...props.params, ...props.data }
})
const visible = ref(false)
watch(() => props.open, (val) => {
  if (val) {
    getContentList()
  }
})

const emit = defineEmits(['close'])

let load = ref<boolean>(false)
const route = useRoute()
const contentList = ref<string[]>([]);

const getContentList = async () => {
  const formInfo = {
    reportPlace: data.value.reportAddress
  }
  contentList.value = await getEmailDetail(person.value.name || person.value.userName, formInfo, data.value);
}

async function handleOk() {
  let params = {
    operator: store.userInFor.userName,
    ...props.params,
    resumesIds: props.selectList.map((v: any) => v.resumesId),
    trainingNumberId: route.query.trainingNumberId
  }
  if (load.value) {
    return
  }
  load.value = true
  const res = await batchTrainingEmail(params).finally(() => {
    load.value = false
  })
  if (res.code == '10000') {
    message.success('发送成功')
    emit('close')
  } else {
    message.error(res.msg)
  }
}
</script>

<style lang="less" scoped>
.email-dialog {
  .email-dialog-content {
    padding: 10px 40px;
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 20px;
  }

  .color {
    color: #209eff;
  }
}

.footer {
  text-align: center
}

.mt-30 {
  margin-top: 20px !important;
}
</style>